<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/themes/icon.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/ainit.css" type="text/css"></link>
 	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.4.4.min.js"></script>
 	<script type="text/javascript" src="${pageContext.request.contextPath}/My97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/homepages/js/functions.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.json-2.4.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.1.2.2.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.ainit-1.0.0.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/report/report.js"></script>
    <script type="text/javascript">
    	var showDa = {};
    	$(function(){
    		$('#cvs').attr('width',document.documentElement.clientWidth-20);
    		$('#cvs').attr('height',document.documentElement.clientHeight-20);
    		$.ajax({
    			url:'${pageContext.request.contextPath}/report/loadBarData',
    			data:{reId:'REP001'},
    			success:function(data){
    				tmpXdata = new Array();
    				tmpYdata = new Array();
    				xPro = data.xColumnList[0];  //横坐标字段(集合)
    				yPro = data.yColumnName;    //纵坐标字段
    				for(var i = 0; i< data.dataList.length; i++){
	    				tmpXdata[i] = data.dataList[i].SDATE;  //得到分组后的时间
	    				tmpYdata[i] = data.dataList[i].SNUM;   //得到每组共有多少条数据
    				}
    				showDa.xdata = tmpXdata;
    				showDa.ydata = tmpYdata;
		        	        	
		            var bar = new RGraph.Bar('cvs', showDa.ydata)
		                .Set('gutter.left', 50)
		                .Set('gutter.top', 50)
		                .Set('gutter.bottom', 50)
		                .Set('labels', showDa.xdata)
		                .Set('colors', ['Gradient(#fe783e:#EC561B:#F59F7D)'])//,'Gradient(#fe783e:#EC561B:#F59F7D)'
		                .Set('hmargin', 20)
		                .Set('strokestyle', 'white')
		                .Set('linewidth', 2)
		                .Set('shadow', true)
		                .Set('labels.above', true)
		                .Set('shadow.offsetx', 2)
		                .Set('title','爱你特综合分析决策报表')
		                .Set('shadow.offsety', 0)
		                .Set('shadow.blur', 1)
		                .Set('title.xaxis', '月份')
		                .Set('title.yaxis', '数量')
		            	.Draw();
		            	
		            var line = new RGraph.Line('cvs', [3605,267,462,362,170,250,693,180,190,250,150,220])
		                .Set('spline', true)
		                .Set('tickmarks', 'filledcircle')
		                .Set('colors', ['#CDE217'])
		                .Set('ymax', 5000);
		    	}
   			});
   		});
    </script>
    <script src="${pageContext.request.contextPath}/js/RGraph/libraries/RGraph.common.core.js" ></script>
    <script src="${pageContext.request.contextPath}/js/RGraph/libraries/RGraph.line.js" ></script>
    <script src="${pageContext.request.contextPath}/js/RGraph/libraries/RGraph.bar.js" ></script>
</head>
<body  onresize="resizeGrid();" style="padding: 0px;">
 <div id='windiv'>
	<canvas id="cvs" width="900" height="200" !style="border: 1px solid gray">[No canvas support]</canvas>
  </div>
</body>
</html>